import React, { useState } from 'react'
import {
    View,
    Text,
    ImageBackground,
    StyleSheet,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native'

import '../../common/global'
import Icon from 'react-native-vector-icons/AntDesign'
import Ico from 'react-native-vector-icons/MaterialCommunityIcons'
import I from 'react-native-vector-icons/FontAwesome'
import Ion from 'react-native-vector-icons/Ionicons'
import { AsyncStorage } from 'react-native';
import {
    useFocusEffect,
} from '@react-navigation/native';
import { useEffect } from 'react/cjs/react.development'

const image = { uri: "https://tse3-mm.cn.bing.net/th/id/OIP.PPBlxAnu6j87vxpf1UaBjAC7FN?pid=ImgDet&rs=1" }

const My = ({ navigation }) => {

    const [qianming, setQian] = useState('');
    const [name, setName] = useState(''); 
    const [a,setA] = useState('');
    const getName = async () => {
        let data = await AsyncStorage.getItem('name');
        data = JSON.parse(data);
        return data;
    }
    

    useFocusEffect(
        React.useCallback(() => {
            getData().then((res) => {
                let data = res;
                setQian(data);
            });
            getName().then((res) => {
                setName(res);
            })
            return () => {

            };
        }, []))

    const getData = async () => {
        let data = await AsyncStorage.getItem('qianming');
        data = JSON.parse(data);
        if (data == null) {
            data = '这个家伙很懒，什么都没有留下~';
            return data;
        } else {
            return data;
        }
    }

    return (
        <ScrollView>
            <View style={styles.container}>
                <ImageBackground source={image} style={styles.image}>
                    <View style={styles.my}>
                        <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                            <Image
                                style={styles.myImg}
                                source={require('../happy/img/111.jpg')}
                            />
                            <Text style={styles.text}>{name}</Text>
                        </View>
                        <TouchableOpacity
                            style={{ marginTop: 10, marginLeft: 5 }}
                            onPress={() => {
                                navigation.navigate('log')
                            }}>
                            <Text style={styles.mySignature}>
                                {qianming}
                                <Icon name="edit" color="white" size={20} />
                            </Text>
                        </TouchableOpacity>


                    </View>
                </ImageBackground>
            </View>

            <View style={styles.game}>
                <View style={styles.gameRecommend}>
                    <Text style={styles.gameText}>我的动态</Text>
                </View>
                <View style={styles.bottoms}>
                    <TouchableOpacity style={styles.bottom} onPress={() => navigation.navigate('post')}>
                        <Ico size={30} name='file-document' color={'rgb(155,141,255)'} />
                        <Text>帖子</Text>
                    </TouchableOpacity >
                    <TouchableOpacity style={styles.bottom} onPress={() => navigation.navigate('like')}>
                        <I size={30} name='heart' color={'rgb(252,106,124)'} />
                        <Text>点赞</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bottom} onPress={() => navigation.navigate('getcomment')}>
                        <I size={30} name='commenting' color={'rgb(32,196,251)'} />
                        <Text>评论</Text>
                    </TouchableOpacity>
                </View>
            </View>




            <View style={styles.game}>
                <View style={styles.gameRecommend}>
                    <Text style={styles.gameText}>更多帮助</Text>
                </View>
                <View style={styles.bottoms}>
                    <TouchableOpacity style={styles.bottom} onPress={() => navigation.navigate('help')}>
                        <Ion size={33} name="help-circle-outline" color={'rgb(251,112,152)'} />
                        <Text>帮助</Text>
                    </TouchableOpacity >
                    <TouchableOpacity style={styles.bottom} onPress={() => navigation.navigate('recom')}>
                        <I size={30} name="edit" color={'rgb(255,187,49)'} />
                        <Text>评价</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bottom} onPress={() => navigation.navigate('us')}>
                        <I size={30} name="group" color={'rgb(137,161,254)'} />
                        <Text>关于我们</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    bottoms: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        // paddingRight:30,
        // paddingLeft:35
    },
    bottom: {
        justifyContent: 'center',
        alignItems: 'center',
        width: (w - 40) / 4,
    },
    container: {
        flex: 1,
        flexDirection: 'column',
        width: w,
        height: 250,
    },
    image: {
        flex: 1,
        resizeMode: "cover",
        justifyContent: 'center'
    },

    my: {
        height: 200,
        width: w - 40,
        marginLeft: 30,
        marginTop: 65
        // borderColor:'red',
        // borderWidth:2
    },
    myImg: {
        width: 80,
        height: 80,
        borderRadius: 50,
        marginBottom: 20
    },
    text: {
        color: "white",
        fontSize: 25,
        fontWeight: "bold",
        marginBottom: 20,
        marginLeft: 30,
        marginTop: 30
        // backgroundColor: "#000000a0"
    },
    mySignature: {
        color: "white",
        fontSize: 15,

    },
    icons: {
        width: w - 40,
        height: 80,
        marginLeft: 20,
        marginTop: 20,
        borderRadius: 15,
        backgroundColor: 'white',
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        paddingRight: 30,
        paddingLeft: 30
    },
    icon: {
        width: (w - 30) / 4,
        justifyContent: 'center'
    },
    game: {
        width: w - 40,
        height: 120,
        marginLeft: 20,
        marginTop: 40,
        borderRadius: 15,
        backgroundColor: 'white',
        flex: 1,
        // flexDirection:'row',
        // alignItems:'center',
    },
    gameText: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    gameRecommend: {
        width: w - 40,
        height: 50,
        paddingTop: 13,
        paddingLeft: 15,
        borderBottomColor: 'rgb(245,246,247)',
        borderBottomWidth: 1,
        fontFamily: 'Microsoft Yahei'
    },
    gameIcon: {
        flex: 1,
        justifyContent: 'center',
        paddingLeft: 25
    }

})

export default My
